<template>
  <v-chart v-if="showChart" class="chart" :option="assignOption" autoresize />
  <nodata-box v-else></nodata-box>
</template>

<script>
import * as echarts from 'echarts/core'
import {
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components'
import { LineChart } from 'echarts/charts'
import { UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition
])
import VChart from 'vue-echarts'

export default {
  name: 'StackLineGraph',
  components: {
    VChart
  },
  props: {
    color: {
      type: Array,
      default: () => ['#EEC177', '#EE9B77', '#EE7777']
    },
    xData: {
      type: Array,
      default: () => [],
      required: true
    },
    yData: {
      type: Array,
      default: () => [],
      required: true
    },
    zoom: {
      type: Boolean,
      default: false
    },
    shadow: {
      type: Boolean,
      default: false
    },
    point: {
      type: Boolean,
      default: false
    },
    smooth: {
      type: Boolean,
      default: false
    },
    stack: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      option: null
    }
  },
  computed: {
    series: function () {
      let areaStyle = () => null
      if (this.shadow) {
        areaStyle = (idx) => {
          return {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: this.color[idx] // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#fff' // 100% 处的颜色
                }
              ]
            }
          }
        }
      }
      return this.yData.map((item, index) => {
        return {
          name: item.name,
          data: item.data,
          stack: this.stack,
          type: 'line',
          lineStyle: {
            width: 1
          },
          areaStyle: areaStyle(index),
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 2
          },
          symbol: 'circle',
          symbolSize: 8,
          showSymbol: this.point,
          smooth: this.smooth
        }
      })
    },
    assignOption: function () {
      return {
        ...this.option,
        xAxis: {
          ...this.option.xAxis,
          data: this.xData
        },
        series: this.series,
        legend: {
          ...this.option.legend,
          data: this.computedLegend
        }
      }
    },
    computedLegend: function () {
      return this.yData.map((item) => item.name)
    },
    showChart() {
      return this.yData.length !== 0
    }
  },
  created() {
    this.option = this.getOption()
  },
  methods: {
    getOption() {
      let dataZoom = null
      if (this.zoom) {
        dataZoom = [
          {
            type: 'slider',
            borderColor: '#fff',
            backgroundColor: 'rgb(233, 235, 255)',
            dataBackground: {
              areaStyle: {
                color: 'rgb(195, 211, 254)',
                opacity: 1
              }
            },
            selectedDataBackground: {
              areaStyle: {
                color: 'rgb(50, 102, 255)',
                opacity: 1
              }
            },
            height: 16,
            handleSize: '80%',
            handleStyle: {
              borderColor: '#000'
            },
            moveHandleSize: 12,
            moveHandleStyle: {
              color: 'rgb(192, 207, 228)',
              opacity: 1
            },
            bottom: 18,
            left: 45,
            right: 32
          },
          {
            type: 'inside'
          }
        ]
      }
      return {
        grid: {
          left: 50,
          right: 30,
          top: 40,
          bottom: this.zoom ? 60 : 40
        },
        color: this.color,
        legend: {
          top: 10,
          right: 16,
          bottom: 20,
          itemWidth: 0,
          itemHeight: 0,
          formatter: (name) => {
            return '{rect|} {a|' + name + '}' // 使用 rect 标记 + 文本的方式来自定义 icon
          },
          // 自定义图例样式
          textStyle: {
            fontSize: 12,
            lineHeight: 18,
            fontWeight: 400,
            rich: {
              rect: {
                width: 8,
                height: 8,
                borderRadius: 2,
                backgroundColor: '{color| }'
              },
              a: {
                color: '#262626',
                fontFamily: 'PingFangSC-Regular, PingFang SC'
              }
            }
          }
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          extraCssText: `
            box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.16);
            border-radius: 2px;
            border: 1px solid #D9D9D9;
            padding: 8px;
            min-width: 115px;
            `,
          formatter: function (params) {
            let legendHtml = `<div class="title">${params[0].axisValueLabel}</div>`
            for (const item of params) {
              const { color, seriesName, value } = item
              legendHtml += `<div class="series-item"><div class='marker' style="background-color:${color}"></div><div class="content-container"><div class="content-name">${seriesName}</div><div class="content-value">${value}</div></div></div>`
            }
            return legendHtml
          },
          textStyle: {
            color: '#5C5C5C',
            fontSize: 12,
            lineHeight: 1
          },
          axisPointer: {
            lineStyle: {
              color: 'rgba(0,0,0,0.1)',
              type: 'solid'
            }
          },
          borderWidth: 10,
          padding: 8
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [],
          axisTick: {
            show: true
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(0, 0, 0, 0.1)',
              type: 'solid'
            }
          },
          axisLabel: {
            color: '#8C8C8C',
            fontFamily: 'PingFangSC-Regular, PingFang SC'
          }
        },
        yAxis: {
          type: 'value',
          name: '个',
          nameTextStyle: {
            color: '#262626',
            fontSize: 12,
            padding: [0, 26, 10, 0]
          },
          splitNumber: 3,
          axisLabel: {
            color: '#262626',
            fontFamily: 'PingFangSC-Regular, PingFang SC'
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,0)',
              type: 'solid'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'solid',
              color: '#E6E6E6'
            }
          }
        },
        dataZoom
      }
    }
  }
}
</script>

<style scoped lang="scss">
.chart {
  background-color: #fff;
}
::v-deep {
  .marker {
    display: inline-block;
    margin-right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
  }
  .title {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #5c5c5c;
    line-height: 17px;
    margin-bottom: 5px;
  }
  .series-item {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    &:last-child {
      margin-bottom: 0;
    }
    .content-container {
      flex: 1;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      line-height: 17px;
      width: 80%;
      .content-name {
        float: left;
        color: #5c5c5c;
        font-weight: 400;
      }
      .content-value {
        float: right;
        font-weight: 500;
        color: #262626;
        margin-left: 8px;
      }
    }
  }
}
</style>
